<template>
  <div class="container question-icon" v-if="question" label="题目详情">
    <div>
      <div class="col-title">
        <!-- 题目 -->
        <div class="">
          <b class="text-title">{{ question.ID }}.{{ question.name }}</b>
          <span v-if="question.source" class="question-source"
            >{{ question.source }}
          </span>
        </div>
      </div>
      <div class="question-intr">
        <span
          >时间限制：{{
            question.timelimit ? Number(question.timelimit) : 200
          }}ms</span
        >
        <span
          >内存限制：
          {{
            question.memorylimit ? Number(question.memorylimit) : 128
          }}MB</span
        >
        <span
          >难度：
          <div :class="`difficulty-${question.difficulty}`">
            {{ question.difficulty ? DATAdifficulty[question.difficulty] : "" }}
          </div>
        </span>
        <span :style="{ padding: 0, textAlign: 'right' }">
          <div class="btn-group" role="group" aria-label="First group">
            <button
              type="button"
              class="btn btn-sm"
              :class="font === 14 ? 'btn-dark' : 'btn-secondary'"
              @click="font = 14"
            >
              小
            </button>
            <button
              type="button"
              class="btn btn-sm"
              :class="font === 18 ? 'btn-dark' : 'btn-secondary'"
              @click="font = 18"
            >
              大
            </button>
          </div>
        </span>
      </div>
    </div>
    <div>
      <!-- <slot></slot> -->
      <contextlist
        v-bind="{ question }"
        :style="{ '--font-size': font + 'px' }"
      ></contextlist>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ElMessage,
  ElMessageBox,
  ElNotification,
  ElOption,
  ElSelect,
} from "element-plus";
import { computed, h, ref, watch } from "vue";
import { useStore } from "vuex";
import { asynccopyquestion } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import contextlist from "../../components/watchQuestion/contextlist.vue";
import { DATAdifficulty } from "../../../index/data/data";

const questionfont = localStorage.getItem("questionfont");
const font = ref(questionfont ? Number(questionfont) : 14);
const t = defineProps<{ question: Studycodemodel.Iquestion }>();

const store = useStore(Storekey);
const getuser = computed(() => {
  return store.state.user;
});

const team = computed(() => {
  return store.state.team?.rows || [];
});
const getlabel = computed(() => {
  return store.state.label?.rows || [];
});

watch(
  () => font.value,
  (e) => {
    localStorage.setItem("questionfont", String(e));
  }
);

const open1 = () => {
  const checked = ref<number>();
  ElMessageBox({
    title: "请选择团队",
    message: () =>
      h(
        ElSelect,
        {
          modelValue: checked.value,
          "onUpdate:modelValue": (val: number) => {
            checked.value = val;
          },
        },
        team.value.map((e) => {
          return h(ElOption, {
            label: e.name,
            value: Number(e.ID),
          });
        })
      ),
  })
    .then((e) => {
      if (!checked.value) {
        ElMessage.error("请选择团队");
        return;
      }
      asynccopyquestion({ ID: t.question.ID, teamid: checked.value })
        .then((c) => {
          ElNotification({
            title: "提示",
            message:
              "该题已复制到【团队题目】，您可以在创建任务、创建比赛时在【团队题目】中找到该题。",
            duration: 0,
          });
        })
        .catch((f) => {
          ElMessage.error(f);
        });
    })
    .catch((c) => {});
};

async function copy() {
  ElMessageBox.confirm(
    "复制为我的题目后，您可以在“题目列表-我的题目”中进行查看",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info",
    }
  )
    .then(() => {
      asynccopyquestion({ ID: t.question.ID })
        .then((c) => {
          ElNotification({
            title: "提示",
            message:
              "该题已复制到【我的题目】，您可以在创建任务、创建比赛时在【我的题目】中找到该题。",
            duration: 0,
          });
        })
        .catch((f) => {
          ElMessage.error(f);
        });
    })
    .catch((c) => {});
}
</script>

<style scoped>
.col-title {
  margin: 20px 0;
}

.question-source {
  background-color: #f6f6f6;
  color: #8c8c8c;
  font-size: 14px;
  height: 26px;
  border-radius: 4px;
  display: inline-block;
  padding: 4px 8px;
  line-height: 18px;
  transform: translateY(-3px);
  margin-left: 12px;
  font-weight: 400;
}

.problem-tag {
  display: inline-block;
}

/* 显示标签 */
.problem-tag-label {
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(70, 131, 250, 1);
  width: 105px;
  height: 32px;
  line-height: 32px;
}

.problem-tag-label-icon {
  display: inline-block;
  margin-left: 4px;
  /* height: 1ex !important; */
}

.problem-tag-item {
  span {
    margin: 2px;
  }
}

.problem-menu {
  float: right;

  span {
    margin-left: 10px;
  }
}

.question-intr {
  margin-top: 14px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  background: #fbfbfb;
  padding: 10px;
  line-height: 1.8;
  margin-bottom: 10px;
  font-size: 13px;

  display: flex;
  flex-wrap: wrap;

  /* align-items: center; */
  span {
    display: inline-block;
    margin: 10px 40px 0 0;
  }
}
</style>
